<template>
  <div class="list-tab">
    <!-- 搜索栏 -->
    <el-form inline label-position="top" :model="query">
      <el-form-item label="名称" prop="name">
        <el-select v-model="query.name" style="width: 120px" clearable filterable placeholder="">
          <el-option v-for="option in names" :key="option" :label="option" :value="option"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="位置" prop="direction">
        <el-select v-model="query.direction" style="width: 120px" clearable filterable placeholder="">
          <el-option v-for="option in directions" :key="option" :label="option" :value="option"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="属性" prop="prop">
        <el-select v-model="query.prop" style="width: 120px" clearable filterable placeholder="">
          <el-option v-for="option in properties" :key="option" :label="option" :value="option"></el-option>
        </el-select>
        <el-input-number v-model="query.value" :controls="false" :min="0" :max="200" style="width: 80px"></el-input-number>
      </el-form-item>
      <el-form-item label="搜索/重置">
        <el-button type="primary" icon="el-icon-search" @click="onSearch" :loading="loading"></el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
      </el-form-item>
    </el-form>
    <!-- 结果 -->
    <div style="height:0;flex:1">
      <el-table :data="data" border height="100%" :header-cell-style="headerStyle">
        <el-empty slot="empty"></el-empty>
        <el-table-column type="index" width="80" label="序号" align="center" fixed="left"></el-table-column>
        <el-table-column v-for="column in columns" v-bind="column" :key="column.prop" :min-width="100" align="center" sortable>
          <template  slot-scope="{row}">
            <div>
              <span>{{row[column.prop]}}</span>
              <el-tag v-if="column.prop==='name' && row.season" effect="dark" size="mini" type="primary">{{row.season}}</el-tag>
              <p v-if="column.prop === 'name'" class="stars">{{'⧫'.repeat(row.star || 0)}}</p>
              <p v-if="column.prop === 'direction'">{{row.mainProp}}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
module.exports = {
  inject: ["app"],
  data() {
    return {
      loading: false,
      query: {},
      formItems: [],
      columns: [
        { label: "名称", prop: "name", fixed: "left" },
        { label: "位置", prop: "direction", fixed: "left" },
      ],
      headerStyle: { background: "#F5F7FA", color: "#555" },
      data: [],
    };
  },
  computed: {
    names() {
      return this.app.dataset.names;
    },
    directions() {
      return this.app.dataset.directions;
    },
    properties() {
      return this.app.dataset.properties;
    },
  },
  mounted() {
    this.columns = [
      ...this.columns,
      ...this.app.dataset.properties.map((v) => {
        return {
          label: v,
          prop: v,
        };
      }),
    ];
    this.onSearch();
  },
  methods: {
    onSearch() {
      const { name, direction, prop, value } = this.query;
      this.data = this.app.dataset.source.filter((v) => {
        const filterName = !name || v.name === name;
        const filterDirection = !direction || v.direction === direction;
        const filterValue = this.compare(v, prop, value);
        return filterName && filterDirection && filterValue;
      });
    },
    compare(data, prop, value) {
      if (!prop || !value) return true;
      let propValue = data[prop];
      if (!propValue) return false;
      return propValue >= value;
    },
    onReset() {
      this.query = {};
      this.onSearch();
    },
  },
}
</script>

<style>

</style>